<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
  <TITLE>Defference and Match</TITLE>
  <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="../script/jQuery/jquery-1.6.2.min.js"></SCRIPT>
  <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="../script/diffLib/diff_match_patch_uncompressed.js"></SCRIPT>
</HEAD>

<BODY>
<H1>Demo for Difference and Match.</H1>
 <style type="text/css">
  .diffDiv {
    	border:1.5px solid gray;
  		height:auto;
  		width:auto;
   }
  </style>
  
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
var dmp = new diff_match_patch();

function launch() {
  var text1 = $("#inputText1").val();
  var text2 = $("#inputText2").val();
  dmp.Diff_Timeout = parseFloat(document.getElementById('timeout').value);
  dmp.Diff_EditCost = 10;
	  //parseFloat(document.getElementById('editcost').value);
  
  var ms_start = (new Date()).getTime();
  var d = dmp.diff_main(text1, text2);
  var ms_end = (new Date()).getTime();
 // alert(d);
  dmp.diff_cleanupEfficiency(d);

  
  dmp.diff_prettyHtml(d,$("#outputdivLeft"),$("#outputdivRight"));
  $("#outputdivLeft").show();
  $("#outputdivRight").show();
}
</SCRIPT>

<form action="#" onsubmit="return false">
<table WIDTH="100%"><TR>
  <td WIDTH="50%">
<H3>Text Version 1:</H3>
<textArea ID="inputText1" STYLE="width: 100%" ROWS=10></textArea></td>

<td WIDTH="50%">
<H3>Text Version 2:</H3>
<textArea ID="inputText2" STYLE="width: 100%" ROWS=10></textArea>
</td>
</TR>
<tr>
	<td>
		<INPUT TYPE="button" onClick="launch()" VALUE="Show Diff">
		
	</td>
</tr>
<tr><td>&nbsp;</td></tr>
<tr> 
  <td valign="top">
		<div ID="outputdivLeft" class="diffDiv" style="display:none"></DIV>
  </td>
  <td valign="top">
		<div ID="outputdivRight" class="diffDiv" style="display:none"></DIV>  	
  </td>
</tr>
</table>

<INPUT TYPE="text" SIZE=3 MAXLENGTH=5 VALUE="5" ID="timeout" style="display:none"/>


</form>


</BODY>
</HTML>
